<!--
 * @Descripttion: 商品详情
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-07 18:57:08
 -->
<template>
  <div style="margin-top: 50px">
    <el-form ref="customForm" :model="dataObj" :rules="rules" label-width="120px" style="width: 600px" size="small">
      <el-form-item label="客户名称:" prop="name">
        <el-input v-model="dataObj.name" />
      </el-form-item>
      <el-form-item label="联系人:" prop="contact">
        <el-input v-model="dataObj.contact" />
      </el-form-item>
      <el-form-item label="联系电话:" prop="number">
        <el-input v-model="dataObj.number" />
      </el-form-item>
      <el-form-item label="联系地址:">
        <el-input v-model="dataObj.address" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="dataObj.remarks"
          :auto-size="true"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getdataById, saveData } from '@/api/customer'
import CateTree from '@/views/goods/category'
import Unit from '@/views/goods/unit'
import { oftenuse } from '@/libs/mixins'
import { isTelOrPhone } from '@/utils/validate'

export default {
  name: 'CustomerDetail',
  mixins: [oftenuse],
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hasEditCreated: false,
      dataObj: {},
      iframe: {},
      rules: {
        name: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        number: [
          { validator: isTelOrPhone, trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
    // 商品的编号
    productId() {
      return this.dataObj.id
    }
  },
  watch: {
  },
  created() {
  },
  destroyed() {
  },
  mounted() {
    const data = this.getPassOnData()
    data.id && this.getGoodDataById(data)
  },
  methods: {
    btnSave() {
      this.handleValid('goodInfoForm').then(() => {
        const params = this.dataObj
        this.setBtnLoading('save', true)
        this.saveGoodData(params).then(() => {
          this.setBtnLoading('save', false)
        })
      })
    },
    btnSaveAdd() {
      this.handleValid('goodInfoForm').then(() => {
        const params = this.dataObj
        this.setBtnLoading('saveAdd', true)
        this.saveGoodData(params).then(res => {
          this.setBtnLoading('saveAdd', false)
          if (res.data.flag) this.dataObj = {}
        })
      })
    },
    btnSelectType() {
      this.iframe.goodType = this.$layer.iframe.addSingle({
        title: '选择类别',
        area: ['300px', '220px'],
        name: 'iframe-cate-tree',
        content: {
          content: CateTree,
          props: {
            isOper: false,
            isSure: true
          }
        }
      })
    },
    btnSelectUnit() {
      this.iframe.goodUnit = this.$layer.iframe.addSingle({
        title: '选择单位',
        area: ['500px', '220px'],
        name: 'iframe-good-unit',
        content: {
          content: Unit,
          props: {
          }
        }
      })
    },
    /**
     * 获取传递的值
     */
    getPassOnData() {
      return this.$route.query
    },
    getGoodDataById(data) {
      getdataById(data).then(res => {
        if (res.data.flag) this.dataObj = res.data.data
      })
    },
    setGoodType(data) {
      this.$set(this.dataObj, 'typeId', data.id)
      this.$set(this.dataObj, 'typeName', data.text)
    },
    setGoodUnit(data) {
      this.$set(this.dataObj, 'unit', data.name)
    },
    saveGoodData(params) {
      return new Promise((resolve, reject) => {
        saveData(params).then(res => {
          resolve(res)
          this.$message[res.data.flag ? 'success' : 'error'](res.data.message)
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}
</script>

<style scoped>
</style>
